<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>答个爽</title>
    <link rel="icon" href="img/dgs.jpg" type="../image/jpg" >
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        body{background-image: url("../img/back.gif");
            background-size:cover;}
        body a{text-decoration: none;color: white}
        #content{
            border-radius: 20px;
            float: right;
            margin-top: 10%;
            margin-right: 10%;
            padding: 10px;
            background-color: rgba(0,0,0,0.3);
            width: 500px;
            height: 500px;
        }
        #head{
            margin: 20px auto 0;
            width: 200px;
            height: 50px;
            text-align: center;
        }
        #xz{
            font-size: 1em;
            margin: 30px 0 10px 0;
            width: 200px;
            height: 20px;
        }
        #wj{
            font-size: 1em;
            float: right;
            margin: 30px 10px 0 0;
            width: 80px;
            height: 20px;
        }
        #xz a{padding: 0 10px}
        #xz a:hover{color: #4abbd8}
        #wj a:hover{color: #4abbd8}
        .infather{
            width: 400px;
            height: 250px;
            margin: 0 auto;
        }

        .input{
            width: 400px;
            height: 250px;
            float: left;
            position: absolute;
        }

        .duinput{
            position: relative;
            width: 70%;
            font-size:14px;
            height:40px;
            border-radius:20px;
            border:1px solid #4abbd8;
            color:black;
            outline:0;
            text-align:left;
            padding-left: 10px;
            display:block;
        }
        input::-webkit-input-placeholder{
            color: #4abbd8;
            font-size: 14px;
        }
        .captcha{
            margin-left: 10px;
            float: left;
            border-radius:20px;
            max-height: 40px;
            max-width: 140px;
            border:1px solid #4abbd8;
        }
        .fasong{
            position: relative;
            border-radius:20px;
            height: 42px;
            width: 120px;
            margin-left: 5%;
            color: white;
            background-color: #00a7de;
            cursor: pointer;
        }
        .denglu{
            width: 100%;
            height: 40px;
        }
        .login{
            border-radius:20px;
            width: 30%;
            height: 35px;
            background-color: #00a7de;
            margin-left: 87px;
            color: white;
        }
        .reg{
            border-radius:20px;
            width: 30%;
            height: 35px;
        }
        button{
            outline: none;
            border: none;
        }
        .login:hover {
            background-color: #3eb5de;
        }
        .reg:hover {
            background-color: #d3d8de;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="head"><b style="font-size: 2em;color: white">登&nbsp;&nbsp;录</b></div>

    <div id="xz">
        <a id="mima" href="javascript:void(0);">密码登录</a>
        <a id="duanxing" href="javascript:void(0);">短信登录</a>
    </div>
<div id="inputfather" class="infather">
    <div id="input1" class="input">
        <i style="color: white;float:left;margin:35px 10px 30px 6%;font-size: 2em" class="layui-icon layui-icon-cellphone"></i>
        <input id="phone1"  style="margin: 30px 0 30px 10px" class="duinput" lay-verify="required" autocomplete="off" placeholder="手机号">
        <i style="color:white;float:left;margin:5px 10px 30px 6%;font-size: 2em" class="layui-icon layui-icon-password"></i>
        <input type="password" id="password" style="margin:0 0 30px 10px;" class="duinput" lay-verify="required" autocomplete="off" placeholder="密码">
        <i style="color:white;float:left;margin-left:6%;margin-top:5px;font-size: 2em" class="layui-icon layui-icon-vercode"></i>
        <input id="captcha" style="margin-left:10px;width: 128px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="图形验证码" >
        <img id="captchaImg"class="captcha" src=""  onclick="reloadCaptcha()">
    </div>

    <div id="input2" class="input" style="display: none">
        <i style="color: white;float:left;margin:70px 10px 30px 6%;font-size: 2em" class="layui-icon layui-icon-cellphone"></i>
        <input id="phone2" value="" style="margin:65px 0 35px 6%" class="duinput" lay-verify="required" autocomplete="off" placeholder="手机号">
        <i style="color: white;float:left;margin-left:6%;margin-top:5px;font-size: 2em" class="layui-icon layui-icon-vercode"></i>
        <input id="yzm" style="margin-left:10px;width: 138px;float: left" class="duinput" lay-verify="required" autocomplete="off" placeholder="验证码">
        <button id="fasong"  class="fasong"></button>
    </div>
</div>

    <div id="denglu" class="denglu">
        <button id="login" class="login" onclick="login()">登录</button>
        <button id="register" class="reg" style="margin-left: 10px" onclick="reg()">注册</button>
    </div>

    <div id="wj" >
        <a id="wjmm" href="wangji.html">忘记密码?</a>
    </div>
</div>




<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script>
    reloadCaptcha();

    layui.use(['layer'], function () {
        var layer = layui.layer;
    });
    var $yzm = document.getElementById('fasong'), flag = false;
    $yzm.onclick = function(){
        var mobile = $('#phone2').val();
        var time=30;
        var h;
        if (mobile==''){
            layer.msg('手机号码为空');
        }
        else {
        if(flag){
            return false;
        }
        flag = true;
        phone2(mobile);
        h= setInterval(function(){
            $yzm.style.backgroundColor='#eee';
            $yzm.style.border='1px solid #ccc';
            $yzm.style.color='#777';
            $yzm.style.cursor='not-allowed';
            if(time<10){
                time='0'+time;
            }
            $yzm.textContent=time+'秒后重新获取';
            time--;
            if(time<0){
                clearInterval(h);
                flag = false;
                $yzm.textContent='重新发送验证码';
                $yzm.style.backgroundColor='#3eb5de';
                $yzm.style.border='none';
                $yzm.style.color='white';
                $yzm.style.cursor='pointer';
            }
        },1000);
        }
    }

    $('#fasong').text('发送验证码');
    $('#duanxing').click(function(){
        $('#input2').css('display','block');
        $('#input1').css('display','none');
    })
    $('#mima').click(function(){
        $('#input2').css('display','none');
        $('#input1').css('display','block');
    })


    function login() {
        var way = $('#input1').css('display');
        if (way =='block'){
            $.ajax({
                url: '/user/login',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    telephone: $('#phone1').val(),
                    password: $('#password').val(),
                    captcha: $('#captcha').val()
                }),
                success: function(res) {
                    console.log(res);
                    if (res.code != 200) {
                        layer.alert(res.msg);
                        reloadCaptcha();
                    } else {
                        sessionStorage.setItem('userId',res.data.userId)
                        if (res.data.isAdmin == false)
                        {
                            location.href = 'user_index.html';
                        }
                        else if (res.data.isAdmin == true)
                        {
                            location.href = 'Admin_index.html';
                        }
                    }
                }
            })
        }


        else if (way == 'none'){
            $.ajax({
                url: '/user/loginByTel',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    telephone: $('#phone2').val(),
                    code: $('#yzm').val(),
                }),
                success: function(res) {
                    console.log(res);
                    if (res.code != 200) {
                        layer.alert(res.msg);
                        reloadCaptcha();
                    } else {
                        sessionStorage.setItem('userId',res.data.userId)
                        if (res.data.isAdmin == false)
                        {
                            location.href = 'user_index.html';
                        }
                        else if (res.data.isAdmin == true)
                        {
                            location.href = 'Admin_index.html';
                        }
                    }
                }
            })
        }

        else {layer.msg('抱歉，系统出现错误，请刷新网页')}

    }

    function reg() {
        location.href ='register.html'
    }


    function reloadCaptcha() {
        $.ajax({
            url: '/user/captcha.jpg',
            xhr: function() {
                var xhr = new XMLHttpRequest()
                xhr.responseType = 'blob'
                return xhr
            },
            success: function(res) {
                var img = document.getElementById('captchaImg');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(res);
            }
        })
    }

    function phone2(tele) {
        $.ajax({
            url: '/user/sendSms/'+tele,
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                layer.msg(res.msg)
            }
        })
    }
</script>
</body>
</html>